<template>

  <div class="follow">
    <div class="imgName">
      <el-image :src="idolMsg.avatarUrl" class="followImg"></el-image>
      <h1 class="nickName">{{ idolMsg.nickname }}</h1>
    </div>
    <span class="MySig">{{ idolMsg.bio }}</span><br>
    <h2>粉丝：{{ idolMsg.fansCount }}</h2><br>
    <h2>食谱：{{ idolMsg.recipeCount }}</h2><br>

    <!-- 创建会话 -->
    <el-button @click="createSession(idolMsg.id)" type="primary">私信</el-button>
    <!-- <span>食谱：{{ idolMsg.recipeCount }}</span> -->
  </div>

</template>

<script setup lang="ts">
import { useChatStore } from '@/stores/chat'
import { useWebSocketStore } from '@/stores/websocket'
import axios from 'axios'
import { onBeforeUpdate, onMounted, onUnmounted, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import { jsx } from 'vue/jsx-runtime'
const router = useRouter()

const chatStore = useChatStore()

let userId = sessionStorage.getItem('userId')


interface idol {
  id: number
  nickname: string
  bio: string
  avatarUrl: string
  fansCount: number
  recipeCount: number
}
let idolMsg: idol = reactive({
  id: 0,
  nickname: '',
  bio: '',
  avatarUrl: '',
  fansCount: 0,
  recipeCount: 0
})

// 监听chatStore中的currentIdol变化,用户点击后执行，
// 获取当前关注对象数据，响应书赋值
watch(
  () => chatStore.currentIdol,
  (newIdol) => {
    if (newIdol && newIdol.id) {
      Object.assign(idolMsg, newIdol)
      console.log('接收到关注者数据:', idolMsg)
    }
  },
  { immediate: true } // 立即执行一次，确保组件挂载时能获取到数据
)




interface session{
  avatarUrl:string
  name:string
  numMember:number
  userId:number[]
}
let sessionMsg:session={
  avatarUrl:'',
  name:'',
  numMember:1,
  userId:[0]
}


// 点击私信创建会话
async function createSession(idolId:number){
  sessionMsg = {//接口传参对象
    avatarUrl:idolMsg.avatarUrl,
    name:idolMsg.nickname,
    numMember:2,
    userId:[Number(userId),idolId]
  }
  // 发送创建数据，创建会话
  const createSessionAxios = await axios({
    url:'/api/session/createSession',
    method:'post',
    data: JSON.stringify(sessionMsg),
    headers:{'Content-Type':'application/json'}
  })
  console.log(createSessionAxios.data.data);
  

  const wsStore = useWebSocketStore()
  // 创建完会话，获取最新的会话列表，将其赋值与wsStore中维护
  async function getsessionList() {
    const sessionListAxios = await axios({
      url:'/api/session/getSessionList',
    })
    // 清空并重新设置会话列表，确保响应式更新
    wsStore.sessionList.length = 0
    sessionListAxios.data.data.forEach((session: any) => {
      wsStore.sessionList.push({ ...session })
    })
    // 遍历会话列表，将未读消息数赋值于键值对象
    wsStore.sessionList.forEach(s => {
      wsStore.unreadCountMap[s.id] = s.uncheckNum
    })
  }
  getsessionList()//创建完会话，默认执行获取更新后的会话列表


// 获取新创建session的messageIdList
  const newSession = wsStore.sessionList.find(s => s.id === createSessionAxios.data.data)
  const messageIdList = newSession ? newSession.messageIdList : []
  
  console.log('新session的messageIdList:', messageIdList)
  
  // 显示聊天展示列表
  wsStore.show = [false,false,false]
  wsStore.show[0] = true

  // 可以用于路由跳转至新创建会话
  router.push({
    name: 'chatpage',
    query: { 
      sessionId: createSessionAxios.data.data,
      messageIdList: messageIdList 
    }
  })

}

</script>

<style scoped>
/* 食谱网站色调样式 */
.imgName{
  position: relative;
  margin-bottom: 20px;
}
.nickName{
  position: absolute;
  left: 110px;
  top: 30px;
  font-size: 24px;
  font-weight: 600;
  color: #5D4037;
  text-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
}


.follow {
  position: relative;
  width: 500px;
  height: 500px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #FFFFFF 0%, #FDF8F2 100%);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(139, 69, 19, 0.1);
  border: 1px solid #E8D5B7;
}

.followImg {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #FFB74D;
  box-shadow: 0 4px 12px rgba(255, 183, 77, 0.3);
}

.el-button{
  padding-left: 20px;
  padding-right: 20px;
  background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
  border: none;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
  transition: all 0.3s ease;
  margin-top: 20px;
}

.el-button:hover {
  background: linear-gradient(135deg, #F57C00 0%, #FFA726 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.MySig {
  font-size: 16px;
  color: #8D6E63;
  margin-bottom: 15px;
  display: block;
  line-height: 1.5;
}

.follow span {
  display: block;
  margin-bottom: 10px;
  color: #5D4037;
  font-size: 14px;
}

* {
  margin: 0;
  padding: 0;
}


ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}



/* 优化文本框滚动条 */
.enterarea::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.enterarea::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
}

.enterarea::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>
